<%@page import="org.proddevplm.dao.data.stakeholders.Stakeholder"%>
<%@page import="org.proddevplm.dao.data.requirements.Requirements"%>
<%@page import="java.util.List"%>
<%@page import="org.proddevplm.constants.ControllerConstants"%>
<%@page import="org.proddevplm.business.activity.constants.ActivityConstants" %>
<%@page import="org.proddevplm.business.tools.constants.ToolsConstants" %>

<%
	List<Requirements> allReqs = (List)session.getAttribute("allReqs");
	List<Stakeholder> allSH = (List)session.getAttribute("shResults");
	Requirements requirement;
	String activityName="";
	
%>


<script>
		
	$(function(){
		$( "button" ).button();
		$("#allReqsTable").tablesorter({
			widgets: ['zebra'],
			headers:{
			5: {sorter: false}
			}
	     }); 
	})
	
	function removeReq(requirement, tRow){
		var confirmReqDeletion = confirm("Do you want to remove this requirement?");
		if(confirmReqDeletion){
			var tableRow = tRow;
			$("#"+tableRow).hide();
			
			var arguments = "requirement="+requirement;
			ajaxCall("toolsManager", "8", arguments, null);
			alert('Requirement deleted successfully');
		}
	}
	
	function editReq(requirement, col1, col2, col3, col4){		
		$("#idColumn1").val(col1);
		$("#idColumn2").val(col2);
		$("#idColumn3").val(col3);
		$("#idColumn4").val(col4);
		$("#editRequirement").dialog( "open" );
		
		var arguments = "requirement="+requirement;
		ajaxCall("dataAccessManager", "12", arguments, populateReqInfo);
	}
	
	function populateReqInfo(data){
		var array = data.split("~");
		document.getElementById('textReq').value = array[0];
		$('#currentSH').html(array[2]);
		document.getElementById('descEditReq').value = array[3];
		$("#requirementId").val(array[1].trim());
	}
	
	$( "#editRequirement" ).dialog({
		autoOpen: false,
		height: 500,
		width: 600,
		modal: true,
		buttons: {
			"Edit requirement": function() {
				var editedRequirement = document.getElementById('textReq').value;
				var editedReqDesc = document.getElementById('descEditReq').value;
				var requirementId = document.getElementById('requirementId').value;
				var newSHforReq = document.getElementById('editStakeholder').value;
				var arguments = "editedRequirement="+editedRequirement+"&requirementId="+requirementId+"&editedReqDesc="+editedReqDesc+"&newSHforReq="+newSHforReq;
				
				ajaxCall("toolsManager", "9", arguments, repopulateTable);
				$( this ).dialog( "close" );
				},
			Cancel: function() {
				$( this ).dialog( "close" );
			}
		},
		close: function() {
			$( this ).dialog( "close" );
		}
	});
	
	function repopulateTable(data){
		var repArray = data.split("~");
		var contentCol1 = repArray[3]
		var contentCol2 = repArray[0];
		var contentCol3 = repArray[1];
		var contentCol4 = repArray[2];
		
		var column1 = document.getElementById('idColumn1').value;
		var column2 = document.getElementById('idColumn2').value;
		var column3 = document.getElementById('idColumn3').value;
		var column4 = document.getElementById('idColumn4').value;
		
		$("#"+column1).html(contentCol1);
		$("#"+column2).html(contentCol2);
		$("#"+column3).html(contentCol3);
		$("#"+column4).html(contentCol4);
		document.getElementById('textReq').value = null;
		document.getElementById('descEditReq').value = null;
		document.getElementById('editStakeholder').selectedIndex = 0;
		
	}
	
	function addNewReq(activityName){
		$("#activityName").val(activityName);
		$( "#addExtraReq" ).dialog("open");
	}
	
	function addTableRow(data){		
		var infoArray = data.split("~");
		var tableRow = "";
	
		tableRow = "<tr id=\"rowx\"><td>" + infoArray[0] + "</td><td id=\"rowxcol2\">" + infoArray[1]
				+ "</td><td id=\"rowxcol4\">"+infoArray[4]+"</td><td id=\"rowxcol3\">" + infoArray[2] + "</td><td>" + infoArray[3]
				+ "</td><td style=\"text-align:center\"><img src=\"/proddev/images/delete1.png\" onclick=\"removeReq('"+infoArray[1]+"', 'rowx')\" align=\"middle\" width=\"20\" height=\"20\"/><img src=\"/proddev/images/edit.png\" onclick=\"editReq('"+infoArray[1]+"', 'rowxcol2', 'rowxcol3')\" align=\"middle\" width=\"20\" height=\"20\"/></td></tr>";

		$("#allReqsTable tr:last").after(tableRow);
		document.getElementById('pickStakeholder').selectedIndex = 0;
		document.getElementById('newRequirement').value = null;		
	}
	
	$( "#addExtraReq" ).dialog({
		autoOpen: false,
		height: 410,
		width: 600,
		modal: true,
		buttons: {
			"Add requirement": function() {
				var activityName = document.getElementById('activityName').value;
				var aux = document.getElementById('pickStakeholder').value;
				var requirement = document.getElementById('newRequirement').value;
				var description = document.getElementById('newReqDescription').value;
				var arguments = "activityName="+activityName+"&stakeholder="+aux+"&requirement="+requirement+"&description="+description;
				ajaxCall("toolsManager", "10", arguments, addTableRow);	
				$( this ).dialog( "close" );
				},
			Cancel: function() {
				$( this ).dialog( "close" );
			}
		},
		close: function() {
			$( this ).dialog( "close" );
		}
	});
	
	
	function approveActivity(name){
		$('#activityName').val(name);
		document.forms['approveForm'].submit();
	}
	
	function rejectActivity(name){
		$("#activityName").val(name);
		$("#rejectDialog").dialog("open");
	}
	
	$( "#rejectDialog" ).dialog({
		autoOpen: false,
		height: 350,
		width: 350,
		modal: true,
		buttons: {
			"Propose change": function() {
				var name = document.getElementById("activityName").value;
				var arguments = "activityName="+name+"&"+buildParameter("changeSubject")+"&"+buildParameter("changeDetails");
				ajaxCall("toolsManager", "21", arguments, forward);
				$( this ).dialog( "close" );
				},
			Cancel: function() {
				$( this ).dialog( "close" );
			}
		},
		close: function() {
			$( this ).dialog( "close" );
		}
	});
	
	function forward(data){
		document.forms["rejectForm"].submit();
	}
	
</script>


<div align="center">
	<div style="width:100%">
		<table id="allReqsTable" class="tablesorter" rules="rows" frame="hsides" bordercolor="#DBDBDB" style="width:100%">
			<thead>
				<tr>
					<th style="width:15%">Stakeholder</th>
					<th style="width:25%">Requirement</th>
					<th style="width:30%">Description</th>
					<th style="width:12%">Added by</th>
					<th style="width:12%">Role in project</th>
					<th style="text-align:center">Action</th>	
				</tr>		
			</thead>
			
			<tbody>
				<%for(int i=0; i<allReqs.size(); i++){ 
					Requirements req = allReqs.get(i);%>
					<tr id="row<%=i+1%>">
						<td id="row<%=i+1%>col1"><%=req.getStakeholder()%></td>
						<td id="row<%=i+1%>col2"><%=req.getRequirement()%></td>
						<td id="row<%=i+1 %>col4"><%=req.getDescription() %></td>
						<%if(req.getStatus().equals("original")){ %>
							<td id="row<%=i+1%>col3"><%=req.getAuthor()%></td>
						<%}else if (req.getStatus().equals("edited")){%>
							<td id="row<%=i+1%>col3"><%=req.getAuthor()%> / e</td>
							<%}%>
						<td><%=req.getRole()%></td>
						<td style="text-align:center">
							<img src="/proddev/images/delete1.png" onclick="removeReq('<%=req.getRequirement()%>', 'row<%=i+1%>')" align="middle" width="20" height="20"/>
							<img src="/proddev/images/edit.png" onclick="editReq('<%=req.getRequirement()%>', 'row<%=i+1%>col1', 'row<%=i+1%>col2', 'row<%=i+1%>col3', 'row<%=i+1%>col4')" align="middle" width="20" height="20"/>
						</td>
					</tr>
				<%}%>
			</tbody>
	
		</table>
		<div style="margin-top:10px; width:100%">
			<%requirement = allReqs.get(0);
			activityName = requirement.getActivityName();
			%>
			<button id="rejectActivity" name="rejectActivity" onclick="rejectActivity('<%=activityName%>')" style="width:150px; font-weight: bold; float:left">Reject activity</button>
			<button id="addNewReq" name="addNewReq" onclick="addNewReq('<%=activityName%>')" style="width:200px; font-weight:bold; float:center">Add new requirement</button>
			<button id="approveActivity" name="approveActivity" onclick="approveActivity('<%=activityName%>')" style="width:150px; font-weight: bold; float:right">Approve activity</button>
			<div style="clear:both"></div>
		</div>
		
		<div id="rejectDialog" title="Propose changes" style="display:none">
			<jsp:include page="/pages/content/project/devTools/workspace/changes/changeReport.jsp"></jsp:include>
		</div>
	
		<form name="rejectForm" method="post" action="/proddev/controller">
			<input type = "hidden" name = "<%=ControllerConstants.MANAGER_KEY%>" value = "<%=ControllerConstants.TOOLS_MANAGER%>"/>
			<input type = "hidden" name = "<%=ControllerConstants.METHOD_KEY%>" value = "<%=ToolsConstants.STAKEHOLDERS_FWD%>"/>
		</form>
				
		<form name="approveForm" method="post" action="/proddev/controller">
			<input type = "hidden" name = "<%=ControllerConstants.MANAGER_KEY%>" value = "<%=ControllerConstants.ACTIVITY_MANAGER%>"/>
			<input type = "hidden" name = "<%=ControllerConstants.METHOD_KEY%>" value = "<%=ActivityConstants.UPDATE_ACTIVITY%>"/>
			<input type="hidden" name="activityName" id="activityName">
		</form>
	
	</div>
	
	<div title="Add requirement" id="addExtraReq" style="display:none">
		<div class="containerSmall" style="width:100%">
			<div style="width:100%; float:left;">
				<div style="margin-top:10px; text-align:left;">
					<b>Stakeholder</b>
				</div>
				<select class="regInput" id="pickStakeholder" name="pickStakeholder" size="1" style="width:60%; margin-top:5px; float:left">
					<option SELECTED>-Please select an option-</option>
					<%
					if (allSH != null){
						for(Stakeholder sh:allSH){%>
							<option value="<%=sh.getShName() %>"><%=sh.getShName() %></option>
						<%}
					}
					%>
				</select>
			</div>
			<div style="clear:both"></div>
			
			<div style="margin-top:10px; text-align:left;">
				<b>Requirement:</b>
			</div>
			
			<div style="margin-top:5px; text-align:left;">
				<input class="regInput" id="newRequirement" name="newRequirement" style="width:100%" />
			</div>
			
			<div style="margin-top:10px; text-align:left;">
				<b>Description:</b>
			</div>
			
			<div style="margin-top:5px; text-align:left;">
				<textarea class="regInput" id="newReqDescription" name="newReqDescription" rows="2" style="width:100%" ></textarea>
			</div>
			<div style="clear:both;"></div>
		</div>
	</div>
	
	<div id="editRequirement" title="Edit requirement" style="display:none">
		<div class="containerSmall" style="width:100%">
			<div style="margin-top:10px">
				<div style="width:60%; float:left"><b>Current stakeholder:</b></div>
				<div id="currentSH" style="width:40%; float:right; text-align:left"></div>
				<div style="clear:both"></div>
			</div>
			
			<div style="margin-top:10px; text-align:left">
				<b>Requirement:</b>
			</div>
			<input id="textReq" name="textReq" class="regInput" style="width:100%; margin-top:5px" />
			<div style="text-align:left; margin-top:10px">
				<b>Description:</b>
			</div>
			<textarea class="regInput" id="descEditReq" rows="2" style="width:100%; margin-top:5px"></textarea>
			<div style="width:100%; float:left;">
				<div style="margin-top:10px; text-align:left;">
					<b>Change Stakeholder</b>
				</div>
				<select class="regInput" id="editStakeholder" name="editStakeholder" size="1" style="width:60%; margin-top:5px; float:left">
					<option SELECTED>-Please select an option-</option>
					<%
					if (allSH != null){
						for(Stakeholder sh:allSH){%>
							<option value="<%=sh.getShName() %>"><%=sh.getShName() %></option>
						<%}
					}
					%>
				</select>
			</div>
			<div style="clear:both"></div>
			
		</div>
	</div>
	<div style="clear:both"></div>
	<input type="hidden" name="requirementId" id="requirementId">
	<input type="hidden" name="idColumn1" id="idColumn1">
	<input type="hidden" name="idColumn2" id="idColumn2">
	<input type="hidden" name="idColumn3" id="idColumn3">
	<input type="hidden" name="idColumn4" id="idColumn4">
</div>